<template>
  <div id="apps" class="common-container">
    <div class="home-container">
      <div class="home-header">
        <div class="home-headerImg">
        </div>
        <div class="home-headerTab">
          <!--:class="[item.index==index? 'spanActive': '']"-->
          <span @click="headerTab(item)" :key="item.index" v-for="item in tabMenu" v-html="item.title"></span>
        </div>
      </div>
      <div class="home-login" v-if="!(userInfo&&userInfo.name)">
        <div class="home-loginInput">
          <span>用户名：</span>
          <input type="text" v-model="userName">
        </div>
        <div class="home-loginInput">
          <span>密码：</span>
          <input type="password" v-model="userPassword">
        </div>
        <input class="home-inputBtn" type="button" @click="loginBtn" value="登录">
      </div>
      <div class="home-login" v-if="(userInfo&&userInfo.name)">
        <div class="home-loginInput">
          <span>单位：{{userInfo&&userInfo.department?userInfo.department:''}}</span>
        </div>
        <div class="home-loginInput">
          <span>姓名：{{userInfo&&userInfo.name?userInfo.name:''}}</span>
        </div>
        <input class="home-inputBtn" type="button" @click="quit" value="退出">
        <input class="home-inputBtn" type="button" @click="isMask=true" value="修改密码">
        <input class="home-inputBtn" type="button" @click="showUserInfo=true" value="修改信息">
      </div>
      <div class="home-content">
        <router-view></router-view>
      </div>
      <div class="home-link">
        <div class="homeLink-title">
          <span>友情链接</span>
        </div>
        <div class="homeLink-item">
          <select onchange="if (this.value!=''){window.open(this[this.selectedIndex].value,'','')}" name="select4">
            <option selected="selected">-中央部门网站-</option>
            <option value="http://www.court.gov.cn/">最高人民法院</option>
            <option value="http://www.spp.gov.cn/gzdt/">最高人民检察院</option>
            <option value="http://npc.people.com.cn/">全国人大办公厅</option>
            <option value="http://www.fmprc.gov.cn/chn">外交部</option>
            <option value="http://www.sdpc.gov.cn">国家发展计划委员会</option>
            <option value="http://www.setc.gov.cn">国家经贸委</option>
            <option value="http://www.moe.edu.cn">教育部</option>
            <option value="http://www.most.gov.cn">科学技术部</option>
            <option value="http://www.costind.gov.cn">国防科工委</option>
            <option value="http://www.seac.gov.cn">国家民委</option>
            <option value="http://www.mps.gov.cn">公安部</option>
            <option value="http://www.mca.gov.cn">民政部</option>
            <option value="http://www.mof.gov.cn">财政部</option>
            <option value="http://www.mop.gov.cn">人事部</option>
            <option value="http://www.mlr.gov.cn">国土资源部</option>
            <option value="http://www.cin.gov.cn">建设部</option>
            <option value="http://www.chinamor.cn.net">铁道部</option>
            <option value="http://www.moc.gov.cn">交通部</option>
            <option value="http://www.mii.gov.cn">信息产业部</option>
            <option value="http://www.agri.gov.cn">农业部</option>
            <option value="http://www.mwr.gov.cn">水利部</option>
            <option value="http://www.moftec.gov.cn">外经贸部</option>
            <option value="http://www.pbc.gov.cn">中国人民银行</option>
            <option value="http://www.moh.gov.cn">卫生部</option>
            <option value="http://www.sfpc.gov.cn">国家计生委</option>
            <option value="http://www.ccnt.gov.cn">文化部</option>
            <option value="http://www.molss.gov.cn">劳动和社会保障部</option>
          </select>
        </div>
        <div class="homeLink-item">
          <select onchange="if (this.value!=''){window.open(this[this.selectedIndex].value,'','')}" name="select3">
            <option selected="selected">-省市政府网站-</option>
            <option value="http://www.beijing.gov.cn">北京市</option>
            <option value="http://www.shanghai.gov.cn">上海市</option>
            <option value="http://www.tj.gov.cn">天津市</option>
            <option value="http://www.cq.gov.cn">重庆市</option>
            <option value="http://www.jiangsu.gov.cn">江苏省</option>
            <option value="http://www.gd.gov.cn">广东省</option>
            <option value="http://www.zhejiang.gov.cn">浙江省</option>
            <option value="http://www.ah.gov.cn">安徽省</option>
            <option value="http://www.hainan.gov.cn">海南省</option>
            <option value="http://www.sc.gov.cn">四川省</option>
            <option value="http://www.gzgov.gov.cn">贵州省</option>
            <option value="http://www.hlj.gov.cn">黑龙江</option>
            <option value="http://www.jiangxi.gov.cn">江西省</option>
            <option value="http://www.yn.gov.cn">云南省</option>
            <option value="http://www.shaanxi.gov.cn">陕西省</option>
            <option value="http://www.gansu.gov.cn">甘肃省</option>
            <option value="http://www.henan.gov.cn">河南省</option>
            <option value="http://www.hubei.gov.cn">湖北省</option>
            <option value="http://www.jl.gov.cn">吉林省</option>
            <option value="http://www.ln.gov.cn">辽宁省</option>
            <option value="http://www.shanxi.gov.cn">山西省</option>
            <option value="http://www.hunan.gov.cn">湖南省</option>
            <option value="http://www.qh.gov.cn">青海省</option>
            <option value="http://www.xinjiang.gov.cn">新疆</option>
            <option value="http://www.gxi.gov.cn">广西</option>
            <option value="http://www.info.gov.hk">香港</option>
            <option value="http://www.macau.gov.mo">澳门</option>
          </select>
        </div>
        <div class="homeLink-item">
          <select onchange="if (this.value!=''){window.open(this[this.selectedIndex].value,'','')}" name="select">
            <option>-省级机关网站-</option>
          </select>
        </div>
        <div class="homeLink-item">
          <select style="width:150px;" onchange="if (this.value!=''){window.open(this[this.selectedIndex].value,'','')}" name="select5">
            <option selected="selected">-市(县、区)部门网站-</option>
          </select>
        </div>
        <div class="homeLink-item">
          <select onchange="if (this.value!=''){window.open(this[this.selectedIndex].value,'','')}" name="select2">
            <option selected="selected">-新闻媒体网站-</option>
            <option value="http://www.xinhua.org">新华网</option>
            <option value="http://www.people.com.cn">人民网</option>
            <option value="http://www.eastday.com">东方网</option>
            <option value="http://www.gmw.com.cn">光明网</option>
            <option value="http://cn.yahoo.com">雅虎</option>
            <option value="http://www.163.com">网易新闻</option>
            <option value="http://news.sina.com.cn">新浪网</option>
            <option value="http://news.sohu.com">搜狐新闻</option>
            <option value="http://www.bjd.com.cn">京报网</option>
            <option value="http://www.phoenixtv.com/home/0,1328,1-1,00.html">凤凰网</option>
            <option value="http://www.chinadaily.com.cn">中国日报</option>
            <option value="http://www.cctv.com">央视国际</option>
            <option value="http://www.chinanews.com.cn">中国新闻社</option>
            <option value="http://www.stdaily.com">科技日报</option>
            <option value="http://www.economicdaily.com.cn">经济日报</option>
            <option value="http://www.bjyouth.com.cn">北京青年报</option>
            <option value="http://www.263.net">首都在线</option>
            <option value="http://www.cyol.net">中青在线</option>
            <option value="http://www.21dnn.com">千龙新闻网</option>
            <option value="http://www.cri.com.cn">中国国际广播电台</option>
            <option value="http://www.cnradio.com">中央人民广播电台</option>
            <option value="http://www.btv.org.cn">北京电视台</option>
            <option value="http://www.bjradio.com.cn">北京人民广播电台</option>
            <option value="http://www.sunlinecn.com">深蓝数码</option>
          </select>
        </div>
      </div>
      <div class="home-footer">
        <ul>
          <li>
            杭州市临安区公共机构节能减排工作领导小组办公室 &nbsp;&nbsp; 地址：临安区政府大院八号楼902室

          </li>
          <li>
            联系电话：0571-61077070 &nbsp;&nbsp;&nbsp;传真：0571-61077071
          </li>
          <!--<li>
                                                                                                                                                                                                                                                                                                        您是本站第33338位访问者
                                                                                                                                                                                                                                                                                                      </li>-->
        </ul>
      </div>
      <div class="table-mask" v-if="isMask">
        <div class="table-maskContent">
          <h2>修改密码</h2>
          <div class="list-row">
            <label>旧密码：</label>
            <input type="password" v-model="oldPassword">
          </div>
          <div class="list-row">
            <label>新密码：</label>
            <input type="password" v-model="newPassword">
          </div>
          <div class="list-row">
            <label>重复新密码：</label>
            <input type="password" v-model="newAgainPassword">
          </div>
          <div class="table-maskBtn">
            <input type="button" value="保存" @click="submitPassword">
            <input type="button" value="关闭" @click="closeMask">
          </div>
        </div>
      </div>
      <div class="table-mask mask-userInfo" v-if="showUserInfo">
        <div class="table-maskContent">
          <h2>修改个人信息</h2>
          <div class="list-row">
            <label>联络员姓名：</label>
            <input type="text" v-model="editorUser.Name">
          </div>
          <div class="list-row">
            <label>职务：</label>
            <input type="text" v-model="editorUser.Post">
          </div>
          <div class="list-row">
            <label>办公室电话：</label>
            <input type="text" v-model="editorUser.Telephone">
          </div>
          <div class="list-row">
            <label>移动电话：</label>
            <input type="text" v-model="editorUser.Mobile">
          </div>
          <div class="list-row">
            <label>传真：</label>
            <input type="text" v-model="editorUser.Fax">
          </div>
          <div class="table-maskBtn">
            <input type="button" value="保存" @click="editorSubmit">
            <input type="button" value="关闭" @click="closeMask">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  const tabMenu = [
    { title: '系统首页', url: '/indexCommon', index: 0 },
    { title: '通知公告', url: '/menuList/1', index: 1 },
    { title: '节能动态', url: '/menuList/2', index: 2 },
    { title: '情况通报', url: '/menuList/3', index: 3 },
    { title: '政策法规', url: '/menuList/4', index: 4 },
    { title: '节能知识', url: '/menuList/5', index: 5 },
    { title: '数据申报', url: '/menuList/6', index: 6 },
    { title: '报表分析', url: '/menuList/7', index: 7 }
  ]
  export default {
    data() {
      return {
        tabMenu,
        index: 0,
        userName: '',
        userPassword: '',
        oldPassword: '',
        newPassword: '',
        newAgainPassword: '',
        isMask: false,
        showUserInfo: false,
        userInfo: {},
        editorUser: {}
      }
    },
    methods: {
      headerTab(item) {
        // this.index = item.index;
        this.$router.push(item.url)
      },
      loginBtn() {
        if (this.userName && this.userPassword) {
          this.$post("/api/User/login", { name: this.userName, password: this.userPassword }).then((res) => {
            console.log(res, '112')
            this.userName = ''
            this.userPassword = ''
            this.userInfo = res
            const userInfo = JSON.stringify(res)
            localStorage.setItem("userInfo", userInfo)
            window.location.reload()
          }).catch(e => alert(e.message))
        } else {
          alert('用户名和密码不能为空！')
        }
      },
      quit() {
        localStorage.clear()
        window.location.reload()
        this.$router.push('/indexCommon')
      },
      submitPassword() {
        if (this.oldPassword && this.newPassword && this.newAgainPassword) {
          if (this.newPassword == this.newAgainPassword) {
            this.$post('/api/User/ChangePassword', {
              oldPassword: this.oldPassword,
              newPassword: this.newPassword
            }).then((res) => {
              alert('恭喜你，密码修改成功')
              this.isMask = false
              localStorage.clear()
              window.location.reload()
              this.$router.push('/indexCommon')
            }).catch(error => alert(error.message))
          } else {
            alert('两次输入新密码不一致!')
          }
        } else {
          alert('请填写完整信息')
        }
      },
      getUserInfo() {
        this.$get("/api/User/Info").then((res) => {
          this.editorUser = res
        }).catch(error => alert(error.message))
      },
      editorSubmit() {
        if (this.editorUser.Name) {
          this.$post("/api/User/EditInfo", this.editorUser).then((res) => {
            console.log(res, 'fanhuizhi')
            alert('信息修改成功')
            this.showUserInfo = false;
          }).catch(error => alert(error.message))
        } else {
          alert('联络员姓名不能为空！')
        }
      },
      closeMask() {
        this.isMask = false;
        this.showUserInfo = false;
        this.oldPassword = ''
        this.newPassword = ''
        this.newAgainPassword = ''
      }
    },
    created() {
      try {
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
        this.getUserInfo();
      } catch (error) {

      }
    }
  }

</script>

<style lang="scss" scoped>
  .home-header {
    width: 100%;
    height: 205px;
    display: flex;
    flex-direction: column;
    .home-headerImg {
      height: 170px;
      background: url("../static/title.png") no-repeat center center;
      background-size: 100% 100%;
      width: 100%;
    }
  }

  .home-headerTab {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 40px;
    flex: 1;
    border-top: 1px solid #135286;
    background-color: #135286;
    span {
      color: #fff;
      display: inline-block;
      height: 35px;
      width: 75px;
      line-height: 35px;
      text-align: center;
      margin-right: 5px;
      &:hover {
        cursor: pointer;
        color: #CE0504;
        background: #ffe17d;
        border: 1px solid #CE0504;
        border-bottom: none;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
      }
    }
    span.spanActive {
      color: #CE0504;
      background: #ffe17d;
      border: 1px solid #CE0504;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      border-bottom: none;
    }
  }

  .home-login {
    border: 1px solid #bbdbf7;
    height: 43px;
    width: 100%;
    margin: 15px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    .home-loginInput {
      margin-left: 25px;
      input {
        height: 25px;
        width: 180px;
      }
    }
    .home-inputBtn {
      margin-left: 20px;
      height: 25px;
      min-width: 50px;
    }
  }

  .home-link {
    height: 40px;
    width: 100%; // margin-bottom: 20px;
    border: 1px solid #bbdbf7;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #f7f7f7;
    .homeLink-title {
      height: 18px;
      line-height: 18px;
      padding: 0 25px 0 10px;
      border-right: 1px solid black;
      font-weight: bold;
    }
    .homeLink-item {
      height: 18px;
      border-right: 1px solid black;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 0 15px;
      &:nth-child(6) {
        border-right: none;
      }
      select {
        width: 130px;
        height: 22px;
      }
    }
  }

  .home-footer {
    border-top: #e8e8e8 1px solid;
    color: #666;
    margin-top: 20px; // padding-top: 10px;
    text-align: center;
    ul {
      li {
        font-size: 12px;
        line-height: 25px;
        height: 25px;
        &:nth-child(3) {
          margin-bottom: 20px;
        }
      }
    }
  } // 修改密码蒙版
  .table-mask {
    position: absolute;
    height: 310px;
    width: 490px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFF;
    padding: 20px 20px 10px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  }

  .mask-userInfo {
    height: auto;
    padding-bottom: 20px;
  }

  .table-maskContent {
    display: flex;
    flex-direction: column;
    h2 {
      display: flex;
      justify-content: center;
      font-size: 16px;
      margin-bottom: 35px;
    }
    .list-row {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      label {
        display: inline-block;
        width: 90px;
        text-align: right;
      }
      input {
        height: 25px;
        width: 250px;
        margin-left: 10px;
        border-radius: 5px;
        padding: 0 5px;
        outline: none;
        border: 1px solid darkgray
      }
    }
  }

  .table-maskBtn {
    display: flex;
    margin-top: 20px;
    flex-direction: row;
    justify-content: center;
    input {
      height: 28px;
      width: 60px;
      margin-left: 55px;
    }
  }
</style>